<template>
  <div class="search-wrapper">
    <el-form :model="form" label-width="50px" :inline="true" class="search-form">
      <el-form-item label="名称">
        <el-input v-model="form.name" style="width: 180px" placeholder="请输入搜索内容" @keyup.enter="handleQuery" label="" clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.state" style="width: 180px" placeholder="请选择状态" clearable>
          <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker v-model="form.date" type="date" style="width: 180px" placeholder="请选择日期" clearable />
      </el-form-item>
      <el-form-item label="时间">
        <el-time-picker v-model="form.time" style="width: 180px" placeholder="请选择时间" clearable />
      </el-form-item>
    </el-form>
    <div class="search-btn">
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button type="success" @click="handleAdd">新增</el-button>
      <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
    </div>
  </div>
  <div class="table-wrapper">
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#FFF' }" stripe :table-layout="fixed" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" :index="index" align="center" width="60" />
      <el-table-column prop="date" sortable label="日期" align="center" width="200" />
      <el-table-column prop="name" label="名称" align="center" width="200" />
      <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip width="200" />
      <el-table-column prop="state" label="状态" align="center" width="200" />
      <el-table-column prop="zip" label="zip" align="center" width="400" />
      <el-table-column prop="tag" label="Tag" align="center" width="400">
        <template #default="scope">
          <el-tag :type="scope.row.tag === 'Home' ? '' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref } from '@vue/reactivity'

const labelPosition = ref('right')
const form = ref({
  name: '',
  state: '',
  date: '',
  time: '',
})
const stateOptions = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '0',
    label: '禁用',
  },
  {
    value: '1',
    label: '启用',
  },
]
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2020-09-15',
    name: 'Alice',
    state: 'New York',
    city: 'New York City',
    address: '123 Main St, Apt 45, NY',
    zip: 'NY 10001',
    tag: 'Home',
  },
  {
    date: '2018-03-10',
    name: 'Bob',
    state: 'Texas',
    city: 'Houston',
    address: '456 Oak St, Suite 27, Houston',
    zip: 'TX 77002',
    tag: 'Work',
  },
  {
    date: '2019-11-20',
    name: 'Eva',
    state: 'Florida',
    city: 'Miami',
    address: '789 Pine St, Miami',
    zip: 'FL 33101',
    tag: 'Vacation',
  },
  {
    date: '2017-08-23',
    name: 'Sophia',
    state: 'Illinois',
    city: 'Chicago',
    address: '210 Lakeview Dr, Chicago',
    zip: 'IL 60601',
    tag: 'Meeting',
  },
  {
    date: '2019-02-12',
    name: 'Oliver',
    state: 'Washington',
    city: 'Seattle',
    address: '55 Pine Ave, Apt 12, Seattle',
    zip: 'WA 98101',
    tag: 'Event',
  },
  {
    date: '2021-06-05',
    name: 'Ava',
    state: 'Colorado',
    city: 'Denver',
    address: '890 Mountain Rd, Denver',
    zip: 'CO 80202',
    tag: 'Conference',
  },
])
const handleDelete = (index, row) => {
  console.log(index, row)
}
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleSelectionChange = (val) => {
  console.log(val)
}
const handleQuery = () => {
  console.log(form.value)
}
const handleAdd = () => {
  console.log('add')
}
const handleBatchDelete = () => {
  console.log('delete')
}
</script>

<style lang="scss" scoped>
.search-wrapper {
  height: 80px;
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search-form {
    width: 80%;
    .el-form-item {
      margin-bottom: 0px !important;
    }
  }
  .search-btn {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
  }
}
.table-wrapper {
    border-radius: 6px;
    overflow: hidden;
}
</style>
